<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html{
        height: 100%;
    }
    body{
        height: 100%;
        min-width: 880px;

    }
    .container{
        height: 100%;
        background-image: url(./pexels-petr-slovacek-770136941-18925511.jpg);
    }
    .login-wrapper{
        background-color: #fff;
        width: 358px;
        height: 588px;
        border-radius: 15px;
        padding: 0 50px;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .header{
        font-size: 38px;
        font-weight: bold;
        text-align: center;
        line-height: 150px;
    }
    .input-item{
        display: block;
        width: 100%;
        margin-bottom: 20px;
        border: 0;
        padding: 10px;
        border-bottom: 1px solid rgb(128,125,125);
        font-size: 15px;
        outline: none;
    }
    button{
        text-align: center;
        padding: 10px;
        width: 100%;
        margin-top: 40px;
        background-image: linear-gradient(to right,#a6c1ee,#fbc2eb);
        border: 1px solid;
        color: #fff;
    }
    .container button:hover{
        background: linear-gradient(to right,#a6c1ee,#fbc2eb);;
    }
    .msg{
        text-align: center;
        line-height: 88px;

    }
    a{
        text-decoration: none;
        color: #fff;
    }
    .msg a{
        color: #a6c1ee;
    }
    ul li{
        position: absolute;
        border: 1px solid #fff;
        background-color: #fff;
        width: 30px;
        height: 30px;
        list-style: none;
        opacity: 0;
    }
    .square li{
        top: 40vh;
        left: 60vw;
        animation: square 10s linear infinite;
    }
    .square li:nth-child(2){
        top: 80vh;
        left: 10vw;
        animation-delay: 2s;

    }
    .square li:nth-child(3){
        top: 80vh;
        left: 85vw;
        animation-delay: 4s;
    }
    .square li:nth-child(4){
        top: 10vh;
        left: 70vw;
        animation-delay: 6s;
    }
    .square li:nth-child(5){
        top: 10vh;
        left: 10vw;
        animation-delay: 8s;
    }
    .circle li{
        bottom: 0;
        left: 15vw;
        animation: circle 10s linear infinite;
    }
    .circle li:nth-child(2){
        left: 35vw;
        animation-delay: 2s;
    }
    .circle li:nth-child(3){
        left: 55vw;
        animation-delay: 6s;
    }
    .circle li:nth-child(4){
        left: 75vw;
        animation-delay: 4s;
    }
    .circle li:nth-child(5){
        left: 90vw;
        animation-delay: 8s;
    }

    @keyframes square {
        0%{
            transform: scale(0) rotateY(0deg);
            opacity: 1;
        }
        100%{
            transform: scale(5) rotateY(1000deg);
            opacity: 1;
        }
    }
    @keyframes circle {
        0%{
            transform: scale(0) rotateY(0deg);
            opacity: 1;
            bottom: 0;
            border-radius: 0;
        }
        100%{
            transform: scale(5) rotateY(1000deg);
            opacity: 1;
            bottom: 90vh;
            border-radius: 50%;
        }
    }





</style>
<body>
<div class="container">
    <div class="login-wrapper">
        <div class="header">登录界面</div>

        <div class="form-wrapper">
            <span>用户名：</span> <input type="text" placeholder="请输入用户名" class="input-item">
            <span>密码：</span> <input type="password" placeholder="请输入密码" class="input-item">
            <span>邮箱号：</span> <input type="password" placeholder="请输入邮箱号" class="input-item">
            <a href="./product_list.jsp" target="_self"><button>登录</button></a>
        </div>
        <div class="msg">
            还没有其他账号？
            <a href="./two.html">来这注册</a>
        </div>

    </div>

    <div class="square">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

        </ul>
    </div>
    <div class="circle">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

        </ul>
    </div>
</div>

<script>
    function login(){
        console.log('登录按钮点击');
    }
</script>
</body>
</html>